<template>
	<view class="container">
		产品页面
		<view style="height: 100rpx;"></view>
		<uni-section title="图片按钮" sub-title="" type="">
			<view class="container-btn-view">
				<view class="container-btn-item">
					<view class="container-btn">
						<image data-id="home" :src="srcList[homeIndex]" mode="scaleToFill" @click="changeImage"></image>
					</view>
				</view>
				<view class="container-btn-item">
					<view class="container-btn">
						<image data-id="overall" :src="srcList[overallIndex]" mode="scaleToFill" @click="changeImage">
						</image>
					</view>
				</view>
				<view class="container-btn-item">
					<view class="container-btn">
						<image data-id="users" :src="srcList[usersIndex]" mode="scaleToFill" @click="changeImage">
						</image>
					</view>
				</view>
			</view>
		</uni-section>
		<view>
			<uni-fab :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger"></uni-fab>
		</view>
		<view>
			<uni-fab :pattern="pattern2"  :horizontal="horizontal2" :vertical="vertical2"
				@fabClick="fabClick2" :popMenu="showpop" >
			</uni-fab>
		</view>
		<view style="height: 300px;">
			撑开页面
		</view>
		<view style="height: 300px;">
			撑开页面
		</view>
		<view style="height: 300px;">
			撑开页面
		</view>
		<view style="height: 300px;">
			撑开页面
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				showpop: false,
				srcList: [
					"../../static/home.png",
					"../../static/home_select.png",
					"../../static/overall.png",
					"../../static/overall_select.png",
					"../../static/users.png",
					"../../static/users_select.png",
				],
				homeIndex: 0,
				overallIndex: 2,
				usersIndex: 4,
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/simple.png',
						selectedIconPath: '/static/simple_select.png',
						text: '相册',
						active: false
					},
					{
						iconPath: '/static/home.png',
						selectedIconPath: '/static/home_select.png',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/users.png',
						selectedIconPath: '/static/users_select.png',
						text: '收藏',
						active: false
					}
				],
				horizontal2: 'right',
				vertical2: 'top',
				pattern2: {
					color: '#7A7E83',
					// backgroundColor: '#fff',
					// selectedColor: '#007AFF',
					buttonColor: '#52a67b',
					iconColor: '#f00'
				},
			}
		},
		onTabItemTap(item) {
			console.log(item);
		},
		methods: {
			changeImage(e) {
				console.log();
				let dataID = e.currentTarget.dataset.id;
				switch (dataID) {
					case 'home':
						this.homeIndex = this.homeIndex === 0 ? 1 : 0;
						break;
					case 'overall':
						this.overallIndex = this.overallIndex === 2 ? 3 : 2;
						break;
					case 'users':
						this.usersIndex = this.usersIndex === 4 ? 5 : 4;
						break;
				}

			},
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
			fabClick2() {
				uni.showLoading({
					title:'加载中。。。',
					complete:()=>{
						console.log('加载完成');
						setTimeout(()=>{
							uni.showToast({
								title: '点击了悬浮按钮2',
								icon: 'none'
							});
							
							uni.navigateTo({
								url: '/pages/addspray/addspray',
								// animationType: 'pop-in',
								// animationDuration: 2000
								
							})
						},2000);
					}
				});
				
			},
		}
	}
</script>

<style lang="scss">
	.container-btn-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.container-btn-item {
			display: flex;
			justify-content: center;
			align-items: center;

			.container-btn {
				width: 100rpx;
				height: 50rpx;
				// border: 1px solid rebeccapurple;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>